<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <a-button @click="add" type="primary">
            <a-icon type="plus-circle" />添加资料
          </a-button>
        </el-button-group>
      </div>
      <a-drawer
        :title="title + '资料'"
        placement="right"
        :closable="false"
        @close="visible = false"
        :visible="visible"
        width="450"
      >
        <el-form
          :model="formData"
          ref="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="排序">
            <el-input-number v-model="formData.paixu"></el-input-number>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="types">
            <el-select v-model="formData.types">
              <el-option
                v-for="item in optionss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="选择私密文件"
            prop="fileurl"
            v-show="formData.types === '私密课程'"
          >
            <el-select filterable title="可搜索" v-model="formData.fileurl">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选取文件" v-show="formData.types === '公共课程'">
            <button
              type="button"
              @click="innerVisible = true"
              class="btn btn-info el-form-item__label text-white"
              style="width: 80px"
            >
              选取文件
            </button>
          </el-form-item>
          <el-form-item
            label="选择视频"
            prop="fileurl"
            v-show="formData.types === '视频课程'"
          >
            <videolist v-bind="{ updatedvideoId }"></videolist>
          </el-form-item>
          <el-form-item label="文件地址" prop="fileurl">
            <el-input v-model="formData.fileurl" disabled></el-input>
          </el-form-item>
          <el-form-item label="提交">
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
      <el-dialog
        width="80%"
        title="选取图片"
        :visible.sync="innerVisible"
        append-to-body
      >
        <ossImglist v-bind:selected="selected"></ossImglist>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table
        height="100%"
        :data="Tpdata.filter((v) => v.teacherproposalid == ID)"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="ID"
          sortable
          label="ID"
          width="100"
        ></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="types" label="类型"></el-table-column>
        <el-table-column prop="isdown" label="下载" width="50">
          <template slot-scope="scope">
            <span v-text="scope.row.isdown ? '是' : '否'"></span>
          </template>
        </el-table-column>
        <el-table-column prop="paixu" label="排序" width="50"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a
              v-if="scope.row.isdown"
              target="view_window"
              class="small"
              :href="scope.row.fileurl"
              >下载</a
            >
            <a
              v-else
              :href="`/wordliulan.html?url=${scope.row.fileurl}`"
              class="small"
              target="view_window"
              >查看</a
            >
            &nbsp; &nbsp;
            <el-button @click="upRow(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="deleteRow(scope.row.ID)" type="text" size="small"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{
        handleSizeChange,
        handleCurrentChange,
        currentPage,
        pagesize,
        data: Tpdata,
      }"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import { mapGetters } from "vuex";
import ossImglist from "@/components/newpublic/oss.vue";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";
import videolist from "@/components/admin/videolist.vue";

import {
  asyncdeltpdata,
  asyncupdatetpdata,
  asynccreatetpdata,
} from "@/plugins/api.js";
export default {
  name: "watchteacherproposal",
  mounted() {
    console.log(this.getSecretfile);
  },
  computed: {
    ...mapGetters(["getSecretfile", "getTeacherproposal"]),
    Tpdata() {
      return this.getTeacherproposal.find((v) => v.ID == this.ID).tpdata;
    },
    options() {
      return this.getSecretfile.map((v) => {
        return {
          value: v.TgtUri,
          label: v.name,
        };
      });
    },
  },
  data() {
    return {
      innerVisible: false,
      visible: false,
      pagesize: 10,
      currentPage: 1,
      title: "添加",
      formData: {
        ID: "",
        fileurl: "",
        name: "",
        isdown: "",
        tablename: "",
        tableid: "",
        paixu: 1,
        types: "",
      },
      optionss: [
        {
          value: "公共课程",
          label: "公共课程",
        },
        {
          value: "私密课程",
          label: "私密课程",
        },
        {
          value: "视频课程",
          label: "视频课程",
        },
      ],
      value: "",
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        fileurl: [
          { required: true, message: "文件路径不能为空", trigger: "blur" },
        ],
      },
    };
  },
  props: ["ID"],
  watch: {
    "formData.types"() {
      this.formData.fileurl = "";
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    selected(v) {
      this.formData.isdown = true;
      this.formData.fileurl = v;
      this.innerVisible = false;
    },
    async submit() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          try {
            if (!this.formData.ID) {
              await asynccreatetpdata(this.formData);
            } else {
              await asyncupdatetpdata(this.formData);
            }
            this.$store.dispatch("actionTeacherproposal");
            this.visible = false;
            this.$message({
              type: "success",
              message: `${this.title}成功!`,
            });
          } catch (err) {
            this.$message({
              type: "error",
              message: `${this.title}失败!`,
            });
          }
        } else {
          return false;
        }
      });
    },
    async deleteRow(ID) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await asyncdeltpdata({ ID });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$store.dispatch("actionTpdata");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    add() {
      this.formData = {
        ID: "",
        fileurl: "",
        name: "",
        isdown: "",
        tablename: "",
        tableid: "",
        types: "",
        paixu: 1,
        teacherproposalid: this.ID,
      };
      this.visible = true;
      this.title = "添加";
    },
    upRow(index) {
      this.formData = JSON.parse(JSON.stringify(index));
      this.visible = true;
      this.title = "修改";
    },
    updatedvideoId(v) {
      this.formData.fileurl = v;
    },
  },
  components: {
    adminContentFooter,
    ossImglist,
    videolist,
  },
};
</script>
